<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div class="foo">
  这是一个foo
  <div class="lib">
    这是一个lib
    <div class="foo">
      这是第二个foo
      <div class="foo">
        这是第三个foo
      </div>
    </div>
  </div>
</div>
<script src="./lib2.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', function () {
        const foos = document.querySelectorAll('.foo')
        const lib = document.querySelectorAll('.lib')
        console.log('DOMContentLoaded foo lib 元素出现 :', foos, lib)
    })
    // 当出现 .foo 或 .lib 元素时执行回调。用于替代 DOMContentLoaded 事件
    ready('.foo', function (element) {
        console.log('MutationObserver 出现了 .foo 元素', element)
    })
    ready('.lib', function (element) {
        console.log('MutationObserver 出现了 .lib 元素', element)
    })

    // 使用 MutationObserver 监听元素出现是要比 DOMContentLoaded 事件要提前的，
    // 这是因为当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件才被触发
    // 而 MutationObserver 只需要特定的元素出现之后就触发，不需要等待其他的元素加载
</script>
</body>
</html>
